{% extends 'base.html' %}

{% block title %}仪表盘 - 区块链交易行为特征分析与可视化系统{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2"><i class="fas fa-tachometer-alt me-2"></i>仪表盘</h1>
</div>

<!-- 统计卡片 -->
<div class="row">
    <div class="col-md-4 mb-4">
        <div class="card border-left-primary h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">总交易数</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ total_transactions|default(0) }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-exchange-alt fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-4 mb-4">
        <div class="card border-left-success h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">总地址数</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ total_addresses|default(0) }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-address-book fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-4 mb-4">
        <div class="card border-left-info h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">系统功能</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">5个核心模块</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 功能卡片 -->
<div class="row">
    <div class="col-lg-6 mb-4">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-list me-2"></i>系统功能</h5>
            </div>
            <div class="card-body">
                <div class="list-group">
                    <a href="{{ url_for('transactions') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        <div>
                            <i class="fas fa-exchange-alt me-2 text-primary"></i>
                            交易数据明细
                        </div>
                        <span class="badge bg-primary rounded-pill">查看</span>
                    </a>
                    <a href="{{ url_for('transaction_summary') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        <div>
                            <i class="fas fa-chart-pie me-2 text-success"></i>
                            交易数据汇总
                        </div>
                        <span class="badge bg-success rounded-pill">查看</span>
                    </a>
                    <a href="{{ url_for('visualization') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        <div>
                            <i class="fas fa-chart-bar me-2 text-info"></i>
                            数据可视化
                        </div>
                        <span class="badge bg-info rounded-pill">查看</span>
                    </a>
                    <a href="{{ url_for('fraud_detection') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        <div>
                            <i class="fas fa-shield-alt me-2 text-danger"></i>
                            非法账号识别
                        </div>
                        <span class="badge bg-danger rounded-pill">查看</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6 mb-4">
        <div class="card">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0"><i class="fas fa-history me-2"></i>最近交易</h5>
            </div>
            <div class="card-body">
                {% if recent_transactions %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>发送方</th>
                                <th>接收方</th>
                                <th>金额</th>
                                <th>时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for tx in recent_transactions %}
                            <tr>
                                <td>{{ tx.from_address[:8] }}...</td>
                                <td>{{ tx.to_address[:8] }}...</td>
                                <td>{{ tx.value }}</td>
                                <td>{{ tx.timestamp|timestamp_to_date }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="text-center mt-3">
                    <a href="{{ url_for('transactions') }}" class="btn btn-sm btn-outline-primary">查看全部交易</a>
                </div>
                {% else %}
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>暂无交易数据
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 快速操作 -->
<div class="card mb-4">
    <div class="card-header bg-warning text-dark">
        <h5 class="mb-0"><i class="fas fa-bolt me-2"></i>快速操作</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-3 mb-3">
                <a href="{{ url_for('transactions') }}" class="btn btn-outline-primary w-100 py-3">
                    <i class="fas fa-search fa-2x mb-2"></i><br>
                    查询交易
                </a>
            </div>
            <div class="col-md-3 mb-3">
                <a href="{{ url_for('transaction_summary') }}" class="btn btn-outline-success w-100 py-3">
                    <i class="fas fa-file-export fa-2x mb-2"></i><br>
                    导出数据
                </a>
            </div>
            <div class="col-md-3 mb-3">
                <a href="{{ url_for('visualization') }}" class="btn btn-outline-info w-100 py-3">
                    <i class="fas fa-chart-line fa-2x mb-2"></i><br>
                    数据分析
                </a>
            </div>
            <div class="col-md-3 mb-3">
                <a href="{{ url_for('fraud_detection') }}" class="btn btn-outline-danger w-100 py-3">
                    <i class="fas fa-user-shield fa-2x mb-2"></i><br>
                    账号检测
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 自定义过滤器：将时间戳转换为日期
    function timestampToDate(timestamp) {
        const date = new Date(timestamp * 1000);
        return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
    }
    
    // 替换模板中的时间戳
    document.addEventListener('DOMContentLoaded', function() {
        const timestampElements = document.querySelectorAll('[data-timestamp]');
        timestampElements.forEach(function(element) {
            const timestamp = element.getAttribute('data-timestamp');
            element.textContent = timestampToDate(timestamp);
        });
    });
</script>
{% endblock %}